<template>
  <el-dialog
    :title="dialogForm.dialogName"
    :visible.sync="showEdit"
    :close-on-click-modal="false"
    width="550px"
    center
    @close="close"
  >
    <el-form
      ref="dialogForm"
      :model="dialogForm"
      :rules="rules"
      label-width="100px"
      class="flex flex_center"
    >
      <el-form-item
        v-for="item in ruleList"
        :key="item.title"
        :label="item.title"
        :prop="item.field"
      >
        <el-input
          v-if="!item.option"
          v-model="dialogForm[item.field]"
          :type="item.type"
          clearable
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        />
        <el-select
          v-else
          v-model="dialogForm[item.field]"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="(it, Index) in infolist[item.option]"
            :key="Index"
            :label="it.text"
            :value="Number(it.value)"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('dialogForm')"
        >提交</el-button
      >
      <el-button type="danger" @click="close()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    //  showEdit: Boolean,
    infolist: Object,
    dialogForm: Object,
  },
  data() {
    return {
      showEdit: false,
      ruleList: [
        // { title: '编号', field: 'id' },
        { title: "渠道名称", field: "channelId", option: "channelUpList" },
        { title: "系统产品", field: "sysProductId", option: "sysProductList" },
        { title: "产品名称", field: "productName" },
        {
          title: "产品编号",
          field: "productNo",
          placeholder: "选填,上游产品发货编号",
        },
        { title: "产品价格", field: "productPrice" },
        { title: "产品类型", field: "type", option: "type" },
        { title: "产品状态", field: "status", option: "status" },
        { title: "产品备注", field: "remark" },
      ],
      rules: {},
    };
  },
  computed: {},
  watch: {
    dialogForm(val) {
      // 监听变化的值,及时校验输入看数据
      if (
        !this.dialogForm.id &&
        !this.dialogForm.productNo &&
        this.$refs["dialogForm"]
      ) {
        this.resetForm("dialogForm");
      }
    },
  },
  created() {
    this.ruleList.forEach((element) => {
        this.rules[element.field] = [
          { required: true, message: `${element.title}不能为空` },
        ];
    });
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // valid 表示输入框的校验结果,校验通过返回true
        if (valid) {
          this.updateOrSave();
        } else {
          return false;
        }
      });
    },
    async updateOrSave() {
      const result = await this.$api.upProduct.updateOrSave(this.dialogForm);
      if (result.code == "100") {
        // 成功消息提示
        this.$message.success("添加成功");
        // 关闭窗口
        this.close("insert");
      } else {
        if (result.message) this.$message.error(result.message);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    close(val) {
      const data = { name: "xxx", isRefresh: val };
      // 子组件向父组件通信
      this.$emit("closeDialog", data);
      this.showEdit = false;
      //  this.resetForm('dialogForm')
    },
  },
};
</script>
<style scoped>
</style>
